<template>
  <div class="order-specification">
    <div class="order-title">
      <slot name="title">
        <div class="date">
          第<span class="date-no" v-if="item">{{item.dateNo}}</span>期
        </div>
        <div class="countdown-wrapper" v-if="item && item.lotteryState == 0">
          <span class="remain-time">开奖剩余</span>
          <count-down :timeStamp="item.drawTime"></count-down>
        </div>
        <div class="cancel">
          <div 
            v-if="item && item.lotteryState == 0"
            class="cancel-order button-selected"
            @click="cancelOrder">
            撤单
          </div>
          <div class="bonus" v-if="item && item.lotteryState == 1">
            +<span>{{item.bonus}}.00</span>
          </div>
        </div>
      </slot>
    </div>
    <div class="order-content">
      <slot>
      </slot>
    </div>
  </div>
</template>

<script>
import CountDown from '@/components/base/count-down/count-down'
export default {
  components: {
    CountDown
  },
  props: {
    item: {
      type: Object,
      default: function() {
        /* 订单信息*/ 
      }
    }
  },
  methods: {
    cancelOrder() {
      this.$emit('cancel', this.item.orderId)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .order-specification 
    border 1px solid $color-divide-line
    border-radius 3px
    .order-title 
      height 40px 
      width 100%
      background-color $color-text-button
      display flex
      align-items center 
      padding 0 10px 
      box-sizing border-box 
      border-bottom 1px solid $color-divide-line
      .date 
        .date-no 
          margin 0 5px
      .countdown-wrapper
        margin-left 10px 
        display flex
        .remain-time
          margin-right 10px 
      .cancel
        flex 1
        display flex 
        justify-content flex-end
        .cancel-order 
          width 48px 
          line-height 25px
          text-align center
        .bonus 
          color $color-theme-red
    .order-content 
      display flex
      background-color #fff
      position relative
</style>
